<template>
  <div class="bigBox">
    <div class="box">
      <div class="lefts" />
      <div class="txt">
        <h3>16</h3>
        <div>点位数</div>
        <h3>5</h3>
        <div>合作商数</div>
      </div>
    </div>
    <div class="right">
      <div>异常设备监控</div>
      <img src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { hzsPT } from '@/api'
export default {
  data() {
    return {
      option: {}
    }
  },
  mounted() {
    this.leftEcharts()
  },
  created() {
    this.leftApi()
  },
  methods: {
    async leftApi() {
      const { data } = await hzsPT()
      console.log(data)
      this.option.series[0].data = data
      var chartDom = document.querySelector('.lefts')
      var myChart = echarts.init(chartDom)
      myChart.setOption(this.option)
    },
    leftEcharts() {
      this.option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true
        },
        series: [
          {
            // width: '200px',
            // height: '200px',
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 120], // 半径
            center: ['55%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },

            data: [
              // { value: 40, name: 'rose 1' },
              // { value: 38, name: 'rose 2' },
              // { value: 32, name: 'rose 3' },
              // { value: 30, name: 'rose 4' },
              // { value: 28, name: 'rose 5' },
              // { value: 26, name: 'rose 6' },
              // { value: 22, name: 'rose 7' },
              // { value: 18, name: 'rose 8' }
            ]
          }
        ]
      }
      // option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.bigBox{
  display: flex;
   justify-content: space-between;
   padding: 20px;
   .box {
    display: flex;
    justify-content: space-between;
    // justify-self: start;
    width: 990px;
    height: 353px;
    background-color: #fff;
     border-radius: 20px;
     .lefts{
    width: 600px;
    height: 353px;

     }
     .txt {
       width: 154px;
       height: 230px;
       padding-top: 47px;
       padding-left: 38px;
       background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
       background-size: 50% 50%;
       background-repeat: no-repeat;
       margin-right: 100px;
       margin-top: 60px;
     }
   }
  .right{
    padding: 20;
    background-color: #fff;
width: 700px;
height: 353px;
  border-radius: 20px;

  img{
    margin-top: 110px;
    margin-left: 300px;
      line-height: 353px;
  }
  }
}
</style>
